<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { ElMessage, type FormInstance, type UploadFile } from 'element-plus'
import { Plus, Edit, Delete, Search, Refresh, View } from '@element-plus/icons-vue'
import Map from '@arcgis/core/Map'
import MapView from '@arcgis/core/views/MapView'
import FeatureLayer from '@arcgis/core/layers/FeatureLayer'
import Graphic from '@arcgis/core/Graphic'
import Point from '@arcgis/core/geometry/Point'
import SimpleMarkerSymbol from '@arcgis/core/symbols/SimpleMarkerSymbol'
import PictureMarkerSymbol from '@arcgis/core/symbols/PictureMarkerSymbol'
import gaodeLayer from '@/utils/GaoDeBaseLayer'
import Query from '@arcgis/core/rest/support/Query.js'
import { nextTick } from 'vue'

// 设施类型选项
const facilityTypes = [
  { value: '教室', label: '教室' },
  { value: '实验室', label: '实验室' },
  { value: '办公室', label: '办公室' },
  { value: '图书馆', label: '图书馆' },
  { value: '体育馆', label: '体育馆' },
  { value: '食堂', label: '食堂' },
  { value: '宿舍', label: '宿舍' },
  { value: '其他', label: '其他' },
]

// 状态变量
const dialogVisible = ref(false)
const dialogTitle = ref('添加设施')
const formType = ref('add')
const showDeleteDialog = ref(false)
const isAddingFacility = ref(false)
const isSelectingLocation = ref(false)
const isEditing = ref(false)
const hasSelectedFeature = ref(false)
let selectedFeature: Graphic | null = null
let newLocation: Point | null = null
const facilityFormRef = ref<FormInstance | null>(null)
const showDetailDialog = ref(false)
const currentDetail = ref<any>(null)
const SelectRefreshKey = ref(0)

// 表单数据
const facilityForm = reactive({
  name: '',
  FacilityType: '',
  address: '',
  photo: '',
  Issues: '[]',
})

// 表单规则
const rules = {
  name: [{ required: true, message: '请输入设施名称', trigger: 'blur' }],
  FacilityType: [{ required: true, message: '请选择设施类型', trigger: 'change' }],
  address: [{ required: true, message: '请输入设施地址', trigger: 'blur' }],
}

// 地图和图层引用
let view: MapView | null = null
let facilityLayer: FeatureLayer | null = null
let tempGraphic: Graphic | null = null

// 初始化
onMounted(() => {
  initMap()
})

onUnmounted(() => {
  if (view) {
    view = null
  }
})

// 初始化地图
const initMap = () => {
  try {
    // 创建地图实例
    const map = new Map({
      basemap: {
        baseLayers: [gaodeLayer],
      },
    })

    // 创建地图视图
    view = new MapView({
      container: 'viewDiv',
      map: map,
      center: [116.3, 39.9], // 北京的经纬度
      zoom: 10,
    })

    // 创建学校设施要素图层
    facilityLayer = new FeatureLayer({
      url: 'https://services7.arcgis.com/7XPW9RycLUzz2YAj/arcgis/rest/services/SchoolFacilityManagement/FeatureServer/0',
      outFields: ['*'], // 获取所有字段
      renderer: {
        type: 'simple',
        symbol: new SimpleMarkerSymbol({
          color: [0, 112, 255],
          outline: {
            color: [255, 255, 255],
            width: 1,
          },
          size: 8,
        }),
      },
    })

    // 添加图层到地图
    map.add(facilityLayer)

    // 添加点击事件
    view.on('click', (event) => {
      if (isAddingFacility.value && isSelectingLocation.value) {
        // 如果正在添加设施并且在选择位置状态，记录点击位置
        newLocation = view!.toMap(event)

        // 添加临时标记
        addTempMarker(
          new Point({
            x: newLocation.x,
            y: newLocation.y,
            spatialReference: view!.spatialReference,
          }),
        )

        // 选择位置后，显示表单对话框
        isSelectingLocation.value = false
        dialogVisible.value = true
        return
      }

      // 如果不是添加模式，执行空间查询
      const query = new Query({
        geometry: event.mapPoint,
        distance: 1000,
        units: 'meters',
        spatialRelationship: 'intersects',
        outFields: ['*'],
        returnGeometry: true,
      })

      // 执行查询
      facilityLayer!
        .queryFeatures(query)
        .then((result) => {
          if (result.features.length > 0) {
            // 获取第一个匹配的要素
            selectedFeature = result.features[0]
            hasSelectedFeature.value = true
            ElMessage.success(`已选择设施: ${selectedFeature.attributes.Name || '未命名设施'}`)
          } else {
            selectedFeature = null
            hasSelectedFeature.value = false
            ElMessage.info('未找到学校设施')
          }
          nextTick(() => {
            SelectRefreshKey.value++
          })
        })
        .catch((error) => {
          console.error('查询失败:', error)
          ElMessage.error('查询设施信息失败')
        })
    })
  } catch (error) {
    console.error('初始化地图失败:', error)
    ElMessage.error('初始化地图失败')
  }
}

// 添加临时标记
const addTempMarker = (location: Point) => {
  // 移除之前的临时标记
  if (tempGraphic && view) {
    view.graphics.remove(tempGraphic)
  }

  // 创建新的临时标记
  tempGraphic = new Graphic({
    geometry: location,
    symbol: new SimpleMarkerSymbol({
      color: [226, 119, 40],
      outline: {
        color: [255, 255, 255],
        width: 2,
      },
      size: 12,
    }),
  })

  // 添加到视图
  if (view) {
    view.graphics.add(tempGraphic)
  }
}

// 打开添加设施对话框
const openAddDialog = () => {
  isAddingFacility.value = true
  isSelectingLocation.value = true
  isEditing.value = false
  newLocation = null
  dialogTitle.value = '添加设施'
  formType.value = 'add'

  // 重置表单
  facilityForm.name = ''
  facilityForm.FacilityType = ''
  facilityForm.address = ''
  facilityForm.photo = ''
  facilityForm.Issues = '[]'

  // 显示选择位置提示
  ElMessage.info('请在地图上点击选择设施位置')
}

// 打开编辑设施对话框
const openEditDialog = (row: any) => {
  if (!facilityLayer) return

  // 查询要素
  const query = new Query({
    where: `OBJECTID = ${row.OBJECTID}`,
    outFields: ['*'],
    returnGeometry: true,
  })

  facilityLayer
    .queryFeatures(query)
    .then((result) => {
      if (result.features.length > 0) {
        selectedFeature = result.features[0]
        isAddingFacility.value = false
        isEditing.value = true
        dialogTitle.value = '编辑设施'
        formType.value = 'edit'
        dialogVisible.value = true

        // 填充表单数据
        const attrs = selectedFeature.attributes
        facilityForm.name = attrs.Name || ''
        facilityForm.FacilityType = attrs.FacilityType || ''
        facilityForm.address = attrs.address || ''
        facilityForm.photo = attrs.photo || ''
        facilityForm.Issues = attrs.Issues || '[]'
      } else {
        ElMessage.error('未找到设施信息')
      }
    })
    .catch((error) => {
      console.error('查询设施失败:', error)
      ElMessage.error('查询设施信息失败')
    })
}

// 确认删除
const confirmDelete = (row: any) => {
  if (!facilityLayer) return

  // 查询要素
  const query = new Query({
    where: `OBJECTID = ${row.OBJECTID}`,
    outFields: ['*'],
    returnGeometry: true,
  })

  facilityLayer
    .queryFeatures(query)
    .then((result) => {
      if (result.features.length > 0) {
        selectedFeature = result.features[0]
        showDeleteDialog.value = true
      } else {
        ElMessage.error('未找到设施信息')
      }
    })
    .catch((error) => {
      console.error('查询设施失败:', error)
      ElMessage.error('查询设施信息失败')
    })
}

// 取消操作
const cancelFacilityOperation = () => {
  dialogVisible.value = false
  isAddingFacility.value = false
  isSelectingLocation.value = false
  isEditing.value = false

  // 清除临时标记
  if (tempGraphic && view) {
    view.graphics.remove(tempGraphic)
  }
  newLocation = null
}

// 保存设施
const submitForm = async () => {
  if (!facilityFormRef.value) return

  try {
    // 表单验证
    await facilityFormRef.value.validate()

    // 准备属性数据
    const attributes: any = {
      Name: String(facilityForm.name),
      FacilityType: String(facilityForm.FacilityType),
      address: String(facilityForm.address),
      photo: String(facilityForm.photo),
      Issues: String(facilityForm.Issues),
      CreationDate: new Date().toString()
    }

    if (isAddingFacility.value) {
      // 添加新设施
      if (!newLocation || !facilityLayer) {
        ElMessage.error('请先在地图上选择位置')
        return
      }

      // 创建新要素
      const newFeature = new Graphic({
        geometry: newLocation,
        attributes: attributes,
      })

      try {
        // 添加到图层
        const results = await facilityLayer.applyEdits({
          addFeatures: [newFeature],
        })

        if (results.addFeatureResults && results.addFeatureResults.length > 0) {
          ElMessage.success('添加设施成功')
          // 清除临时标记
          if (tempGraphic && view) {
            view.graphics.remove(tempGraphic)
          }
        } else {
          ElMessage.error('添加设施失败')
        }
      } catch (error) {
        console.error('添加设施时出错:', error)
        ElMessage.error('添加设施失败')
      }
    } else if (isEditing.value) {
      // 编辑现有设施
      if (!selectedFeature || !facilityLayer) {
        ElMessage.error('未选择设施')
        return
      }

      // 更新要素属性
      const updatedFeature = selectedFeature.clone()
      updatedFeature.attributes = {
        ...updatedFeature.attributes,
        ...attributes,
        OBJECTID: selectedFeature.attributes.OBJECTID, // 保留原始ID
      }

      // 应用编辑
      const results = await facilityLayer.applyEdits({
        updateFeatures: [updatedFeature],
      })

      if (results.updateFeatureResults.length > 0) {
        ElMessage.success('更新设施成功')
        selectedFeature = updatedFeature
      } else {
        ElMessage.error('更新设施失败')
      }
    }

    // 关闭对话框
    dialogVisible.value = false
    isAddingFacility.value = false
    isEditing.value = false
    newLocation = null
  } catch (error) {
    console.error('保存设施失败:', error)
    ElMessage.error('表单验证失败，请检查输入')
  }
}

// 删除设施
const deleteFacility = async () => {
  if (!selectedFeature || !facilityLayer) {
    ElMessage.error('未选择设施')
    return
  }

  try {
    // 执行删除
    const results = await facilityLayer.applyEdits({
      deleteFeatures: [selectedFeature],
    })

    if (results.deleteFeatureResults.length > 0) {
      ElMessage.success('删除设施成功')
      selectedFeature = null
      hasSelectedFeature.value = false
    } else {
      ElMessage.error('删除设施失败')
    }

    // 关闭对话框
    showDeleteDialog.value = false
  } catch (error) {
    console.error('删除设施失败:', error)
    ElMessage.error('删除设施失败')
  }
}

// 处理照片上传并转换为base64
const handlePhotoChange = (file: UploadFile) => {
  const isImage = file.raw?.type.startsWith('image/')
  if (!isImage) {
    ElMessage.error('只能上传图片文件!')
    return
  }

  // 图片大小限制（2MB）
  const isLt2M = file.size! / 1024 / 1024 < 2
  if (!isLt2M) {
    ElMessage.error('图片大小不能超过2MB!')
    return
  }

  // 压缩并转换图片为base64
  compressImage(file.raw as File, 800, 0.7)
}

// 压缩图片
const compressImage = (file: File, maxWidth: number, quality: number) => {
  const reader = new FileReader()
  reader.readAsDataURL(file)
  reader.onload = (e) => {
    const img = new Image()
    img.src = e.target?.result as string
    img.onload = () => {
      const canvas = document.createElement('canvas')
      const ctx = canvas.getContext('2d')

      // 计算压缩后的尺寸，保持宽高比
      let width = img.width
      let height = img.height
      if (width > maxWidth) {
        height = (height * maxWidth) / width
        width = maxWidth
      }

      canvas.width = width
      canvas.height = height
      ctx?.drawImage(img, 0, 0, width, height)

      // 转换为base64并设置到表单
      const base64 = canvas.toDataURL('image/jpeg', quality)
      facilityForm.photo = base64
    }
  }
}

// 删除照片
const removePhoto = () => {
  facilityForm.photo = ''
}
</script>

<template>
  <div class="facilities-container">
    <!-- 地图容器 -->
    <div id="viewDiv" class="map-view"></div>

    <!-- 位置选择提示 -->
    <div class="location-selection-tip" v-if="isSelectingLocation">
      <el-alert title="请在地图上点击选择设施位置" type="warning" :closable="false" show-icon />
    </div>

    <!-- 右上角功能面板 -->
    <div class="control-panel">
      <el-card class="control-card">
        <template #header>
          <div class="card-header">
            <span>校园设施管理</span>
            <svg class="header-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 3L1 9L5 11.18V17.18L12 21L19 17.18V11.18L21 10.09V17H23V9L12 3Z" fill="#1976d2"/>
              <path d="M12 5.29L5 9.17L12 13L19 9.17L12 5.29Z" fill="#42a5f5"/>
            </svg>
          </div>
        </template>
        <div class="control-buttons">
          <el-button type="primary" @click="openAddDialog" class="facility-button">
            <svg class="button-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z" fill="currentColor"/>
            </svg>
            添加设施
          </el-button>
          <el-button
            type="warning"
            @click="openEditDialog(selectedFeature?.attributes)"
            :disabled="!hasSelectedFeature"
            class="facility-button"
          >
            <svg class="button-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3 17.25V21H6.75L17.81 9.94L14.06 6.19L3 17.25ZM20.71 7.04C21.1 6.65 21.1 6.02 20.71 5.63L18.37 3.29C17.98 2.9 17.35 2.9 16.96 3.29L15.13 5.12L18.88 8.87L20.71 7.04Z" fill="currentColor"/>
            </svg>
            编辑设施
          </el-button>
          <el-button
            type="danger"
            @click="confirmDelete(selectedFeature?.attributes)"
            :disabled="!hasSelectedFeature"
            class="facility-button"
          >
            <svg class="button-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M6 19C6 20.1 6.9 21 8 21H16C17.1 21 18 20.1 18 19V7H6V19ZM19 4H15.5L14.5 3H9.5L8.5 4H5V6H19V4Z" fill="currentColor"/>
            </svg>
            删除设施
          </el-button>
        </div>
        <div class="operation-tip" v-if="!hasSelectedFeature && !isAddingFacility">
          <el-alert
            title="提示：点击地图选择设施进行编辑或删除，或点击添加设施按钮创建新设施"
            type="info"
            :closable="false"
            show-icon
          />
        </div>
        <div
          class="selected-info"
          v-if="hasSelectedFeature "
          :key="SelectRefreshKey"
        >
          <div class="info-header">
            <svg class="info-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 7V3H2V21H22V7H12ZM6 19H4V17H6V19ZM6 15H4V13H6V15ZM6 11H4V9H6V11ZM6 7H4V5H6V7ZM10 19H8V17H10V19ZM10 15H8V13H10V15ZM10 11H8V9H10V11ZM10 7H8V5H10V7ZM20 19H12V17H14V15H12V13H14V11H12V9H20V19ZM18 11H16V13H18V11ZM18 15H16V17H18V15Z" fill="#1976d2"/>
            </svg>
            <span>已选择设施</span>
          </div>
          <el-descriptions
            :column="1"
            border
            size="small"
            class="facility-descriptions"
          >
            <el-descriptions-item label="名称">{{
              selectedFeature!.attributes.Name || '未知'
            }}</el-descriptions-item>
            <el-descriptions-item label="地址">{{
              selectedFeature!.attributes.address || '未知'
            }}</el-descriptions-item>
          </el-descriptions>
        </div>
      </el-card>
    </div>

    <!-- 其他对话框保持不变 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="500px" destroy-on-close>
      <el-form
        ref="facilityFormRef"
        :model="facilityForm"
        :rules="rules"
        label-width="100px"
        style="max-width: 460px"
      >
        <el-form-item label="设施名称" prop="name">
          <el-input v-model="facilityForm.name" placeholder="请输入设施名称" />
        </el-form-item>
        <el-form-item label="设施类型" prop="FacilityType">
          <el-select
            v-model="facilityForm.FacilityType"
            placeholder="请选择设施类型"
            style="width: 100%"
          >
            <el-option
              v-for="item in facilityTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="设施地址" prop="address">
          <el-input v-model="facilityForm.address" placeholder="请输入设施地址" />
        </el-form-item>
        <el-form-item label="设施照片">
          <div class="upload-container">
            <el-upload
              class="avatar-uploader"
              :auto-upload="false"
              :show-file-list="false"
              :on-change="handlePhotoChange"
              accept="image/*"
            >
              <img v-if="facilityForm.photo" :src="facilityForm.photo" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
            <div class="upload-tip" v-if="facilityForm.photo">
              <el-button size="small" type="danger" @click="removePhoto">删除照片</el-button>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="位置" v-if="isAddingFacility">
          <div class="location-info">
            <el-tag v-if="newLocation" type="success">已选择位置</el-tag>
            <el-tag v-else type="warning">请在地图上点击选择位置</el-tag>
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelFacilityOperation">取消</el-button>
          <el-button
            type="primary"
            @click="submitForm"
            :disabled="isAddingFacility && !newLocation"
          >
            保存
          </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 查看设施详情对话框 -->
    <el-dialog v-model="showDetailDialog" title="设施详情" width="500px">
      <el-descriptions v-if="currentDetail" :column="1" border>
        <el-descriptions-item label="设施名称">{{ currentDetail.name }}</el-descriptions-item>
        <el-descriptions-item label="设施类型">{{ currentDetail.typeName }}</el-descriptions-item>
        <el-descriptions-item label="设施地址">{{ currentDetail.location }}</el-descriptions-item>
        <el-descriptions-item label="设施照片">
          <el-image
            v-if="currentDetail.photo"
            :src="currentDetail.photo"
            style="width: 200px; max-height: 200px"
            :preview-src-list="[currentDetail.photo]"
            fit="contain"
          />
          <span v-else>无照片</span>
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>

    <!-- 删除确认对话框 -->
    <el-dialog v-model="showDeleteDialog" title="确认删除" width="30%">
      <span
        >确定要删除设施 "{{ selectedFeature?.attributes.Name || '未知设施' }}"
        吗？此操作不可恢复。</span
      >
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showDeleteDialog = false">取消</el-button>
          <el-button type="danger" @click="deleteFacility">确认删除</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.facilities-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.map-view {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

/* 控制面板样式优化 */
.control-panel {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 10;
  width: 300px;
}

.control-card {
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  border: none;
  overflow: hidden;
  backdrop-filter: blur(5px);
}
.el-button + .el-button {
  margin-left: 0px;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  color: #186bbf;
  font-weight: bold;
  font-size: 18px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #e3f2fd, #bbdefb);
  border-bottom: 2px solid #1976d2;
}

.header-icon {
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2));
}

.control-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 16px 0;
  padding: 0 16px;
}

.facility-button {
  position: relative;
  overflow: hidden;
  border: none;
  font-size: 15px;
  padding: 10px 0;
  color: #fff;
  z-index: 1;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.button-icon {
  margin-right: 8px;
}

.facility-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transform: translateX(-100%);
  transition: transform 0.5s;
  z-index: -1;
}

.facility-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.facility-button:hover::before {
  transform: translateX(100%);
}

.facility-button[type='primary'] {
  background: linear-gradient(135deg, #1976d2, #2196f3);
}

.facility-button[type='warning'] {
  background: linear-gradient(135deg, #ed6c02, #ff9800);
}

.facility-button[type='danger'] {
  background: linear-gradient(135deg, #d32f2f, #f44336);
}

.facility-button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.operation-tip {
  margin: 12px 16px;
}

.operation-tip :deep(.el-alert) {
  border-radius: 8px;
  background-color: rgba(224, 247, 250, 0.5);
  border-left: 4px solid #42a5f5;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.selected-info {
  margin: 16px;
  padding: 12px;
  background: rgba(224, 247, 250, 0.3);
  border-radius: 8px;
  border: 1px solid rgba(66, 165, 245, 0.3);
}

.info-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  color: #1976d2;
  font-weight: bold;
  font-size: 16px;
}

.info-icon {
  margin-right: 8px;
}

.facility-descriptions {
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 6px;
  overflow: hidden;
}

.facility-descriptions :deep(.el-descriptions__body) {
  background-color: rgba(255, 255, 255, 0.7);
}

.facility-descriptions :deep(.el-descriptions__label) {
  background-color: rgba(66, 165, 245, 0.1);
  font-weight: bold;
  color: #1976d2;
}

.facility-descriptions :deep(.el-descriptions__content) {
  padding: 12px 16px;
}

/* 保留其他样式 */
.search-card {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 10;
  width: calc(100% - 40px);
  max-width: 1200px;
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border: 1px solid #e0e0e0;
}

.table-card {
  position: absolute;
  top: 120px;
  left: 20px;
  z-index: 10;
  width: calc(100% - 40px);
  max-width: 1200px;
  max-height: calc(100% - 160px);
  overflow-y: auto;
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border: 1px solid #e0e0e0;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

:deep(.warning-row) {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}

:deep(.info-row) {
  --el-table-tr-bg-color: var(--el-color-info-light-9);
}

.location-selection-tip {
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  width: 300px;
}

.upload-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.avatar-uploader {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
  width: 150px;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.avatar-uploader:hover {
  border-color: var(--el-color-primary);
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.avatar {
  width: 150px;
  height: 150px;
  display: block;
  object-fit: cover;
}

.upload-tip {
  margin-top: 10px;
}

.location-info {
  display: flex;
  justify-content: center;
  margin-top: 5px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style>
